<template>
    <div class="content">
      <div class="w100 haed bbg pr">
        <img @click="getBack" class="fl hpd pa" style="height: 40rem;left: 20rem;top: 7rem;" src="../../assets/img/back.png">
        <p class="fz37 cfff hpd tc">活动发布</p>
      </div>
      <main class="pr brs">
        <div>
          <p>标题:</p>
          <input class="w500" type="text" v-model="form.title">
        </div>
        <div>
          <p>内容:</p>
          <textarea class="w500" v-model="form.content"></textarea>
        </div>
        <div>
          <p>图片/视频:</p>
          <Uploader :after-read="afterRead" :max-count="2" v-model="form.fileList">
              <div class="upload tc pt30 pb30 bsb">
                  <Icon name="plus" class="plus mb10" />
                  <p>点击选择上传</p>
              </div>
          </Uploader>
        </div>
      </main>
      <div style="justify-content: space-around;display: flex;margin-top: 69rem;">
        <button @click="onSubmit">发布</button>
      </div>
    </div>
</template>
<script>
import {informationIssue} from '../../api/index'
import { Uploader } from 'vant';
import { Icon } from 'vant';
import { Toast } from 'vant';
import { Notify } from 'vant';
import 'vant/lib/Uploader/style';
import 'vant/lib/icon/style';
import 'vant/lib/toast/style';
import 'vant/lib/notify/style';
  export default {
    components: { Uploader, Icon },
    data() {
      return {
        form: {
          title: '',
          content: '',
          fileList:[]
        },
      }
    },
    methods: {
      //  发布活动 
      onSubmit() {
        //  验证是否输入
        if (this.form.title == '') {
          // this.$refs.title.focus();
          Toast('请输入活动标题');
          return;
        }
        //  验证是否输入
        if (this.form.content == '') {
          // this.$refs.content.focus();
          Toast('请输入活动内容');
          return;
        }
        console.log(this.form);
        //  发布活动
        informationIssue()
        .then(r =>{
          console.log(r);
          //  消息提示
          if(r.code == 200){
            Notify({ type: 'success', message: r.data })
          }
        })
        //  跳转到活动列表
        // this.$router.push('activity')
      },
      //  后退
      getBack(){
        this.$router.back();
      },
      afterRead(file) {
        file.status = 'uploading';
        file.message = '上传中...';
        setTimeout(() => {
            file.status = 'done';
        }, 1000)
        console.log(file);
      },
    }
  }
</script>
<style scoped>
.w500{width: 500rem;}
main{background-color: #fff;margin: -292rem 20rem 0;padding: 30rem 33rem 26rem 30rem;}
main div{display: flex;padding: 15rem 0;}
main div p{font-size: 26rem;line-height: 65rem;width: 140rem;}
main div input{height: 63rem;border: 2px solid #e8e8e8;border-radius: 32rem;padding: 0 25rem;font-size: 24rem;color: #808080;box-sizing: border-box;}
main div textarea{height: 356rem;border: 2px solid #e8e8e8;border-radius: 15rem;padding: 25rem;font-size: 24rem;color: #808080;box-sizing: border-box;}
button{width: 520rem;height: 75rem;background-color: #0762e6;border: none;font-size: 26rem;color: #fff;border-radius: 38rem;text-align: center;}

.upload {
    width: 238rem;
    height: 178rem;
    border: 2rem solid #d9d9d9;
    background-color: #fff;
    border-radius: 10rem;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    white-space: nowrap;
}
.upload .plus {
  font-size: 32rem;
  color: #bfbfbf;
  height: 32rem;
  /* padding-bottom: 20rem; */
}
>>> .van-uploader__preview-image{
  width: 238rem;
    height: 178rem;
}
>>> .van-uploader{padding: 0;}
.upload p {
  font-size: 18rem;
  color: #bfbfbf;
  line-height: 18rem;
}
</style>